<template>
  <div>
    <p>父组件</p>
    <p>{{ money }}</p>
    <p>父传子</p>
    <!--    父传子：在setup种使用props数据 setup(props){ // props就是父组件数据 }-->
    <!--    子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }-->
    <!--    在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令-->
    <hr/>
    <Son :money="money"/>
    <Son v-model:money="money"/>
    <hr/>
    <!--    父组件接收子组件信息-->
    <Son :money="money" @change-money="updateMoney"/>
  </div>
</template>

<script>
import {provide, ref} from "vue"
import Son from './Son'

export default {
  name: "Part2",
  components: {
    Son
  },
  setup() {
    const money = ref(100)
    const updateMoney = (newMoney) => {
      money.value -= newMoney
    }
    const money1 = ref(99)
    const updateMoney1 = () => {
      console.log(money1);
    }
    provide('money1', money1)
    provide('updateMoney1', updateMoney1)
    return {
      money,
      updateMoney,
      money1,
      updateMoney1
    }
  }
}
</script>

<style scoped>

</style>
